<template>
  <!--顶部导航栏-->
  <div class="navContainer">
    <el-menu
      class="el-menu-horizontal"
      mode="horizontal"
      router
      background-color="rgb(185, 231, 165)"
      text-color="#fff"
      active-text-color="#ffd04b">
      <h3 style="margin-left: 20px;">{{ '惠农平台' }}</h3>
      <el-menu-item key="table_data" index="table_data">
        <span class="font-20px">数据搜索</span>
      </el-menu-item>
      <el-submenu key="echart1" index="echart1">
        <template slot="title">
          <span class="font-20px">数据分析可视化</span>
        </template>
        <el-menu-item-group key="echart1_1">
          <el-menu-item style="font-size: 16px;" index="prodCatAvgPrice">农产品不同时期价格分布</el-menu-item>
          <el-menu-item style="font-size: 16px;" index="prodCatCount">不同类型农产品价格统计</el-menu-item>
          <el-menu-item style="font-size: 16px;" index="prodPcatPriceTop15">不同类型农产品价格未来预测</el-menu-item>
          <el-menu-item style="font-size: 16px;" index="pubDatePrice">农产品近日均价</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: "Aside",
  data() {
    return {
      isAdmin: false
    }
  },
  mounted() {
    const userInfo = JSON.parse(localStorage.getItem("userInfo"))
    this.isAdmin = userInfo && userInfo.role === "admin";
  }
}
</script>

<style lang="less" scoped>
.el-menu-horizontal {
  width: 100vw;
  border-bottom: none;
  display: flex;
  align-items: center;
}
.font-20px {
  font-size: 17px;
}
.navContainer {
  width: 100vw;
  background: rgb(185, 231, 165);
}
h3 {
  color: #fff;
  text-align: left;
  line-height: 48px;
  font-size: 20px;
  font-weight: 400;
  padding: 0 30px 0 0;
  margin: 0;
  display: inline-block;
}
</style>
